<div class="ngm-theme-dark dark w-[400px] shrink-0 flex flex-col justify-start overflow-auto
  bg-bluegray-800 dark:bg-bluegray-900 text-white p-4 group">
  <div class="w-full flex justify-start items-center my-2" cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
    <mat-icon displayDensity="cosy" class="-ml-2 opacity-0 group-hover:opacity-80">drag_indicator</mat-icon>
    <span class="text-lg pointer-events-none">
      {{ 'Story.Shares.Share' | translate: {Default: 'Share'} }}
    </span>
  </div>

  <div class="flex-1 flex flex-col">
    <div *ngIf="data?.isAuthenticated && data?.access === AccessEnum.Write" class="p-4 flex flex-col">
      <label>{{ 'Story.Shares.StoryVisibility' | translate: {Default: 'Story Visibility'} }}</label>
      <mat-radio-group class="visibility-radio-group flex justify-start items-center gap-4"
        [(ngModel)]="visibility"
        [disabled]="visibilityDisabled"
        >
        <mat-radio-button class="visibility-radio-button" *ngFor="let option of visibilities" [value]="option">
          {{ 'Story.Shares.Visibility_'+option | translate: {Default: option} }}
        </mat-radio-button>
      </mat-radio-group>

      <ng-container *ngIf="visibility() !== Visibility.Public">
        <mat-slide-toggle class="my-2" [(ngModel)]="isSecret">{{ 'Story.Shares.Visibility_secret' | translate: {Default: 'Secret'} }}</mat-slide-toggle>

        <ng-container *ngIf="isSecret()">
          <label>
            {{ 'Story.Shares.Expires' | translate: {Default: 'Expires (minutes)'} }}
            <span class="text-xs text-gray-400">
              {{ 'Story.Shares.ExpiresDescription' | translate: {Default: 'The url will be deleted after the specified time.'} }}
            </span>
          </label>
          <mat-slider color="accent"
            thumbLabel
            step="10"
            min="0"
            [max]="60 * 24 * 2"
            discrete
            >
            <input matSliderThumb [(ngModel)]="expires">
          </mat-slider>
        </ng-container>
        
      </ng-container>
    </div>

    <div *ngIf="isStory">
      <ngm-select searchable valueKey="key" [label]="'Story.Shares.InitialPage' | translate: {Default: 'Initial Page'}"
        [(ngModel)]="pageKey"
        [selectOptions]="pagesSelectOptions()"
      ></ngm-select>
    </div>

    <div class="flex justify-between my-2">
      <div ngmButtonGroup>
        <button mat-raised-button color="accent" (click)="generate()">
          {{ 'Story.Shares.Generate' | translate: {Default: 'Generate'} }}
        </button>
      </div>

      <div *ngIf="applicationUrl()" class="flex justify-end items-center">
        <button mat-icon-button displayDensity="cosy" (click)="togglePreview()">
          <mat-icon [ngStyle]="showPreview ? {
            'transform': 'rotate(180deg)',
            'transition': 'transform 0.2s ease-in-out'
          } : {
            'transition': 'transform 0.2s ease-in-out'
          }"
          >arrow_forward_ios</mat-icon>
        </button>
        {{ 'Story.Shares.Preview' | translate: {Default: 'Preview'} }}
      </div>
    </div>

    <ngm-input [label]="'Story.Shares.ApplicationURL' | translate: {Default: 'Application URL'}"
      [ngModel]="applicationUrl()"
    >
      <div ngmSuffix class="block rounded-full bg-gray-500">
        <button mat-icon-button displayDensity="cosy"
          [matTooltip]="'Story.Shares.CopyURL' | translate: {Default: 'Copy URL'}"
          [disabled]="!applicationUrl()"
          (click)="copy(applicationUrl())">
          <mat-icon>content_copy</mat-icon>
        </button>
      </div>

    </ngm-input>

  </div>

</div>

<div class="w-[500px] flex justify-center items-center">
  <div class="preview" *ngIf="showPreview; else placeholder">
    <iframe [src]="embedUrl"></iframe>
  </div>

  <ng-template #placeholder>

    <span>
      {{ 'Story.Shares.GenerateLinkToPreview' | translate: {Default: 'Generate link to preview'} }}
    </span>

  </ng-template>
</div>

<ng-template #copyMessage>
  <span>{{ 'Story.Shares.CopyURLSuccess' | translate: {Default: 'Copy URL Success'} }}</span>
</ng-template>
